<template>
	<view class="page">
		<view class="header-line">
			<view class="return-btn" @click="backPage"></view>
			<view class="text">计划</view>
		</view>
		<view class="main-content">
			<view class="filter-tabs">
				<view class="filter-tab" v-for="tab in tabs" :key="tab" :class="{ active: tab === activeTab }" @click="selectTab(tab)">{{ tab }}</view>
			</view>
			<view class="plan-cards">
				<view class="t-list">
					<view class="item" v-for="item in showTarget" :key="item.id" @click="openPlanBox(item)">
						<view class="header">
							<view class="title">{{ item.title }}</view>
							<view class="remain-time">{{ item.checkinDay != item.count ? (item.isChecked ? '今日已完成' : '今日待完成') : '已全部完成' }}</view>
						</view>
						<view class="progress-box">
							<view class="progress" :style="`--progress: ${item.progress};`"></view>
							<view class="progress-text">{{ item.progress }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="add-plan-button" @click="navigateToNextPage('/pages/addPlan/addPlan')">新建计划</view>
		</view>
		<!-- 每日计划详情的窗口 -->
		<view class="plan-shadow" v-if="plan.isshow">
			<view class="plan-box">
				<view class="miniwin-header">
					<view class="title">计划详情</view>
				</view>
				<view class="miniwin-main">
					<view class="plan-content">
						<view class="group">
							<view class="name">任务名称：{{ plan.taskName }}</view>
						</view>
						<view class="group">
							<view class="name">任务描述：</view>
							<view class="taskDesc">{{ plan.taskDesc }}</view>
						</view>
						<view class="group">
							<view class="name">打卡进度：</view>
							<view class="task-line-bottom-line">
								<view class="progress" :style="`--progress: ${ plan.progress }`"></view>
								<view class="progress-text">{{ plan.progress }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="btn-line">
					<view class="no-btn" @click="closePlanBox">取消</view>
					<view class="ok-btn" @click="checkinPlan" v-if="plan.checkinDay != plan.count">{{ plan.isChecked ? '已打卡' : '打卡' }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// 服务层
import { plan } from '../../server/plan.js';

// 业务层
import { getPlanList, filterPlanList } from '../../service/plan.js';


export default {
	data() {
		return {
			activeTab: "全部",
			tabs: ['全部', '进行中', '已完成'],
			allTarget: [],
			showTarget: [],
			plan: {
                isshow: false,
                id: '',
                taskName: '',
                taskDesc: '',
                progress: '0%',
                isChecked: false,
                checkinDay: 0,
                count: 1
            }
		}
	},
	methods: {
		backPage() {
			uni.navigateBack();
		},
		navigateToNextPage(url) {
			uni.navigateTo({ url });
		},
		selectTab(tab){
			this.activeTab = tab;
			this.showTarget = filterPlanList[tab](this.allTarget);
		},
		openPlanBox(item) {
            this.plan.isshow = true;
            this.plan.id = item.id;
            plan.getPlanInfo(item.id).then(res => {
                this.plan.taskName = res.planInfo.name;
                this.plan.taskDesc = res.planInfo.description;
                this.plan.progress = `${((parseInt(res.planInfo.checkinDay) / parseInt(res.planInfo.count)) * 100).toFixed(2)}%`;
                this.plan.isChecked = res.planInfo.isCheckin;
                this.plan.checkinDay = parseInt(res.planInfo.checkinDay),
                this.plan.count = parseInt(res.planInfo.count)
            }).catch((err) => {
                uni.showToast({
                    icon: 'none',
                    title: '请检查网络',
                    duration: 500
                });
                setTimeout(() => {
                    this.plan.isshow = false;
                }, 400);
            });
        },
        closePlanBox() {
            this.plan.isshow = false;
            this.plan.id = '';
            this.plan.taskName = '';
            this.plan.taskDesc = '';
            this.plan.progress = '0%';
            this.plan.isChecked = false;
            this.plan.checkinDay = 0;
            this.plan.count = 1;
        },
        checkinPlan() {
            if (this.plan.isChecked) {
                uni.showToast({
                    icon: 'none',
                    title: '今日已打卡',
                    duration: 500
                });
                return ;
            }
            plan.checkinPlan(this.plan.id).then(res => {
                if (res.success) {
                    // 提示
                    uni.showToast({
                        icon: 'none',
                        title: '计划打卡成功',
                        duration: 500
                    });
                    // 关闭弹窗
                    this.closePlanBox();
                    // 获取打卡计划列表
                    getPlanList(this);
                } else {
                    uni.showToast({
                        icon: 'none',
                        title: res.msg,
                        duration: 500
                    });
                }
            }).catch((err) => {
                uni.showToast({
                    icon: 'none',
                    title: '请检查网络',
                    duration: 500
                });
            });
        }
	},
	onShow() {
		// 获取计划列表
        getPlanList(this).then((res) => {
			this.showTarget = this.allTarget;
		});
	}
}

</script>

<style>
.main-content {
	background-color: #f5f5f5;
}

/* 过滤标签 */
.filter-tabs {
    display: flex;
    gap: 2.5vmin;
    overflow-x: auto;
	padding: 5vmin;
}

.filter-tabs .filter-tab {
	height: 10vmin;
	width: 20vmin;
    border-radius: 4vmin;
    font-size: 3.5vmin;
    color: #666;
    background: #fff;
    white-space: nowrap;
	line-height: 10vmin;
	text-align: center;
}

.filter-tabs .filter-tab.active {
	background: #07c160;
	color: #fff;
}

/* 今日目标 */
.plan-cards {
    display: flex;
    flex-direction: column;
    gap: 4vmin;
}

.plan-cards .t-list {
	padding-bottom: 25vmin;
}

.plan-cards .item {
    background: #fff;
    border-radius: 2vmin;
	margin-bottom: 3vmin;
    padding: 4vmin;
	box-shadow: 0 0.5vmin 2vmin #0000000a;
}

.plan-cards .item > .header {
    display: flex;
    justify-content: left;
    align-items: center;
    margin-bottom: 3vmin;
}

.plan-cards .icon {
	width: 6vmin;
	height: 6vmin;
    background-position: center;
    background-size: cover;
}

.plan-cards .title {
    font-size: 4vmin;
    font-weight: 700;
    margin-left: 2vmin;
    max-width: 70%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.plan-cards .t-empty {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    padding: 10vmin 0;
    gap: 3vmin;
    font-size: 3.5vmin;
}

.remain-time {
    text-align: right;
    flex: 1;
    font-size: 3vmin;
    color: #666;
}

.progress-box {
    display: flex;
    align-items: center;
    gap: 3vmin;
}

.progress {
    flex: 1;
    height: 1.5vmin;
    background: #eee;
    border-radius: 0.75vmin;
    overflow: hidden;
}

.progress::after {
    content: "";
    display: block;
    width: var(--progress);
    height: 100%;
    background: #07c160;
    border-radius: 0.75vmin;
    transition: width .3s ease;
}

.progress-text {
    font-size: 3vmin;
    color: #07c160;
    min-width: 9vmin;
}

.add-plan-button {
	--h: 10vmin;
    width: 80vw;
    height: var(--h);
	position: fixed;
	left: 50%;
	bottom: 15vmin;
	transform: translateX(-50%);
    background: #07C160;
    color: #fff;
    border-radius: 4vmin;
	font-size: 4vmin;
    text-align: center;
    line-height: var(--h);
}


/* 计划详情 */
.plan-shadow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #8888;
}

.plan-shadow .plan-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80vmin;
    max-height: 110vmin;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 3vmin;
    display: flex;
    flex-direction: column;
}

.plan-shadow .miniwin-header {
    display: flex;
    padding: 5vmin;
    border-bottom: 0.1vmin solid #ccc;
}

.plan-shadow .title {
    font-size: 4vmin;
}

.plan-shadow .miniwin-main {
    flex: 1;
    padding: 5vmin;
    overflow-y: auto;
}

.plan-shadow .plan-content {
    font-size: 3.5vmin;
    flex: 1;
}

.plan-shadow .group {
    margin-bottom: 5vmin;
}

.plan-shadow .taskDesc {
    text-indent: 2em;
    overflow-wrap: break-word;
}

.plan-shadow .task-line-bottom-line {
    margin-top: 3vmin;
    display: flex;
    align-items: center;
    gap: 3vmin;
}

.plan-shadow .progress {
    flex: 1;
    height: 2.5vmin;
    background: #eee;
    border-radius: 1vmin;
    overflow: hidden;
}

.plan-shadow .progress::after {
    content: "";
    display: block;
    width: var(--progress);
    height: 100%;
    background: #07c160;
    border-radius: 3px;
    transition: width .3s ease;
}

.plan-shadow .progress-text {
    font-size: 3vmin;
    color: #07c160;
    min-width: 9vmin;
}

.plan-shadow .btn-line {
    display: flex;
    gap: 3vmin;
    padding: 5vmin;
    border-top: 0.1vmin solid #ccc;
}

.plan-shadow .btn-line > view {
    /* --h: 10vmin; */
    flex: 1;
    /* height: var(--h);
    line-height: var(--h); */
    text-align: center;
    margin: 0 auto;

    padding: 2vmin 0;
    border-radius: 5vmin;
    font-size: 3.5vmin;
    border: none;
    transition: all .2s ease;
}

.plan-shadow .ok-btn {
    background-color: rgb(7, 193, 96);
    color: #fff;
}

.plan-shadow .no-btn {
    background-color: #ccc;
    color: #000;
}

.plan-shadow .ok-btn:active {
    background-color: rgb(13, 161, 85);
}

</style>
